<template>
  <div>
    <van-nav-bar title="患者评价" left-text="返回" left-arrow @click="onClickLeft" />

    <div class="patient">
      <div class="patient-title">
        <div class="box">
          <div class="box-tab" v-if="!isExpanded">
            <span
              v-for="(step, index) in visibleTabs"
              :key="index"
              :class="{ active: index === currentStep }"
              @click="selectStep(index)">
              {{ step.title }}
            </span>
          </div>
          <div class="box-tap" v-if="isExpanded">
            <span
              v-for="(step, index) in steps"
              :key="index"
              :class="{ active: index === currentStep }"
              @click="selectStep(index)">
              {{ step.title }}
            </span>
          </div>
          <button @click="toggleTabsVisibility">{{ isExpanded ? '隐藏' : '展开' }}</button>
        </div>

        <div v-if="currentStep === 0">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
              </div>
            </div>
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
              </div>
            </div>
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>

              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
              </div>
            </div>

            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>

              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStep === 1">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
              </div>
            </div>
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                胃肠功能紊乱
              </div>
            </div>
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>

              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                胃肠功能紊乱
              </div>
            </div>

            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>

              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                胃肠功能紊乱
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStep === 2">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                胃食管反流
              </div>
            </div>
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                胃食管反流
              </div>
            </div>
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>

              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                胃食管反流
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStep === 3"></div>
        <div v-if="currentStep === 4"></div>
        <div v-if="currentStep === 5"></div>
        <div v-if="currentStep === 6"></div>
        <div v-if="currentStep === 7"></div>
        <div v-if="currentStep === 8"></div>
        <div v-if="currentStep === 9"></div>
        <div v-if="currentStep === 10"></div>
        <div v-if="currentStep === 11"></div>
        <div v-if="currentStep === 12">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                胃炎
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStep === 13">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                胃癌
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStep === 14">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                便秘
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStep === 15">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                肠易激综合征
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStep === 16">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                食管炎
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStep === 17">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                糜烂性胃炎
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStep === 18">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指...
                恶心与呕吐
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStep === 19">
          <div class="patient-content">
            <div class="patient-content-text">
              <div class="patient-content-text-shu">
                <span class="text-shu-phone"><b>138*******6</b></span>
                <span class="wen">图文</span>
                <span class="man">满意</span>
                <span class="text-shu-time">11月18日</span>
              </div>
              <div class="patient-content-wen">
                <span>耐心细致</span>
                |
                <span>讲解很清楚</span>
                |
                <span>建议很有帮助</span>
                |
                <span>回复很及时</span>
              </div>
              <div class="patient-content-ta">
                问题描述:您好，我是前几天体检做了一个粪便检查，结果是阳性， 那边说就是指... 肝脂肪
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
// const value = ref('')
const steps = ref([
  { title: '全部(10683)' },
  { title: '胃肠功能紊乱(635)' },
  { title: '胃食管反流(492)' },
  { title: '消化不良(369)' },
  { title: '焦虑症(331)' },
  { title: '药物过敏(305)' },
  { title: '急性肠胃炎(285)' },
  { title: '呃逆症(265)' },
  { title: '幽门螺杆菌感染(244)' },
  { title: '腹泻病(197)' },
  { title: '萎缩性胃炎(165)' },
  { title: '反流性食管炎(159)' },
  { title: '胃炎(129)' },
  { title: '胃癌(101)' },
  { title: '便秘(100)' },
  { title: '肠易激综合征(81)' },
  { title: '食管炎(79)' },
  { title: '糜烂性胃炎(78)' },
  { title: '恶心与呕吐(72)' },
  { title: '肝脂肪(68)' }
]);
const currentStep = ref(0);

const selectStep = (stepIndex: number) => {
  currentStep.value = stepIndex;
};
const onClickLeft = () => history.back();

const isExpanded = ref(false);

// 定义初始显示的标签数量
const initialVisibleTabs = 5;

const visibleTabs = ref(steps.value.slice(0, initialVisibleTabs));

const toggleTabsVisibility = () => {
  isExpanded.value = !isExpanded.value;
  if (isExpanded.value) {
    visibleTabs.value = steps.value;
  } else {
    visibleTabs.value = steps.value.slice(0, initialVisibleTabs);
  }
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  font-size: 16px;
}

.active {
  color: #ff9d81 !important;
  border: 0.5px solid #ff9d81;
  font-weight: bold;
}

.patient {
  height: 100%;
  width: 100%;

  // background-color: pink;
  // padding: 10px 5px;
  .patient-title {
    height: 100%;
    width: 100%;
    // background-color: yellow;
    // padding: 20px;

    .box {
      // width: 100%;
      // height: 100%;
      // border: 1px solid ;
      // background-color: rgb(46, 187, 27);
      padding: 5px;
      .box-tab {
        height: 100px;
        width: 100%;
        // background-color:blue;
      }
      .box-tap {
        height: 300px;
        width: 100%;
        // background-color:blueviolet;
      }
      span {
        float: left;
        height: 30px;
        // width: 140px;
        line-height: 30px;
        background-color: #f7f7f7;
        color: #757575;
        text-align: center;
        margin-right: 10px;
        padding: 0 8px;
        margin-bottom: 15px;
        font-size: 13px;
      }
    }
  }

  .patient-content {
    height: 100%;
    width: 100%;
    // background-color: red;
    margin-top: 10px;

    .patient-content-text {
      height: 170px;
      width: 100%;
      //   background-color: blue;
      border-top: 1px solid #000;
      padding: 15px;

      .patient-content-text-shu {
        height: 25px;
        width: 100%;
        // background-color: orange;
        margin-bottom: 10px;

        span {
          float: left;
          line-height: 25px;
          margin-right: 10px;
        }

        .text-shu-phone {
          float: left;
        }

        .text-shu-time {
          float: right;
          color: #9c9c9c;
        }

        .wen {
          height: 25px;
          width: 50px;
          text-align: center;
          background-color: #f2f8fd;
          color: #308ce8;
        }

        .man {
          height: 25px;
          width: 50px;
          text-align: center;
          background-color: #fff6f3;
          color: #ff6c42;
        }
      }

      .patient-content-wen {
        height: 30px;
        width: 100%;
        // background-color: orchid;
        margin-bottom: 10px;
        line-height: 30px;
        color: #9c9c9c;

        span {
          font-size: 14px;
          padding-right: 5px;
        }
      }

      .patient-content-ta {
        height: 60px;
        width: 100%;
        background-color: #f7f7f7;
        padding: 10px;
        font-size: 15px;
      }
    }
  }
}
</style>